.bottom {
  animation: slide-top 0.1s cubic-bezier(0, 0, 0.2, 1) forwards;
  @keyframes slide-top {
    0% {
      transform: translateY(-5px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
}

.top {
  animation: slide-bottom 0.1s cubic-bezier(0, 0, 0.2, 1) forwards;
  @keyframes slide-bottom {
    0% {
      transform: translateY(5px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    100% {
      transform: translateY(0px);
      opacity: 1;
    }
  }
}

.right {
  animation: slide-left 0.1s cubic-bezier(0, 0, 0.2, 1) forwards;
  @keyframes slide-left {
    0% {
      transform: translateX(-5px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
}

.left {
  animation: slide-right 0.1s cubic-bezier(0, 0, 0.2, 1) forward;
  @keyframes slide-right {
    0% {
      transform: translateX(5px);
      opacity: 0;
    }
    25% {
      opacity: 1;
    }
    100% {
      transform: translateX(0px);
      opacity: 1;
    }
  }
}

.childrenWrapper {
  display: flex;
  align-items: center;
  border-radius: 0.375rem;
  padding: 0.375rem 0.75rem;
  background: var(--gray-800);
  color: white;
  white-space: nowrap;
  font-size: 0.875rem; /* 14px */
  line-height: 1.25rem; /* 20px */
}

.arrowWrapper {
  position: absolute;
  border-color: #2d3748;
}
